<template>
  <div class="page-container">
    <!-- 新增天气模块 -->
    <el-card class="weather-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>当前天气</span>
        </div>
      </template>
      <div class="weather-content">
        <div class="weather-icon">
          <el-icon><Sunny /></el-icon>
        </div>
        <div class="weather-details">
          <div class="main-info">
            <div class="temperature">25°C</div>
            <div class="condition">晴</div>
          </div>
          <div class="additional-info">
            <div class="info-item">
              <span>湿度：</span>60%
            </div>
            <div class="info-item">
              <span>风速：</span>10 km/h
            </div>
            <div class="info-item">
              <span>气压：</span>1013 hPa
            </div>
            <!-- 新增数据 -->
            <div class="info-item">
              <span>能见度：</span>15 km
            </div>
            <div class="info-item">
              <span>露点温度：</span>15°C
            </div>
            <div class="info-item">
              <span>紫外线指数：</span>3 中等
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 数据卡片 -->
    <el-row :gutter="32" class="data-cards">
      <el-col :span="6">
        <el-card class="data-card" shadow="hover">
          <div class="card-content new-layout">
            <div class="card-info">
              <div class="card-title">总用户数</div>
              <div class="card-value styled-value"> {{ userStats.total }}</div>
              <div class="card-trend" :class="{ 'up': userStats.growth > 0 }">
                <el-icon><component :is="userStats.growth > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ Math.abs(userStats.growth) }}%
              </div>
            </div>
            <div class="card-icon">
              <el-icon><User /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card" shadow="hover">
          <div class="card-content new-layout">
            <div class="card-info">
              <div class="card-title">总配送员数</div>
              <div class="card-value styled-value"> {{ deliverymanStats.total }}</div>
              <div class="card-trend" :class="{ 'up': deliverymanStats.growth > 0 }">
                <el-icon><component :is="deliverymanStats.growth > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ Math.abs(deliverymanStats.growth) }}%
              </div>
            </div>
            <div class="card-icon">
              <el-icon><Van /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card" shadow="hover">
          <div class="card-content new-layout">
            <div class="card-info">
              <div class="card-title">今日订单数</div>
              <div class="card-value styled-value"> {{ orderStats.today }}</div>
              <div class="card-trend" :class="{ 'up': orderStats.growth > 0 }">
                <el-icon><component :is="orderStats.growth > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ Math.abs(orderStats.growth) }}%
              </div>
            </div>
            <div class="card-icon">
              <el-icon><List /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card" shadow="hover">
          <div class="card-content new-layout">
            <div class="card-info">
              <div class="card-title">今日收入</div>
              <div class="card-value styled-value">¥{{ incomeStats.today }}</div>
              <div class="card-trend" :class="{ 'up': incomeStats.growth > 0 }">
                <el-icon><component :is="incomeStats.growth > 0 ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ Math.abs(incomeStats.growth) }}%
              </div>
            </div>
            <div class="card-icon">
              <el-icon><Money /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>订单趋势</span>
              <el-radio-group v-model="orderChartType" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 修改图表容器高度 -->
            <div ref="orderChartRef" class="chart" style="left: 30px; top: -30px; width: 350px; height: 330px; position: relative;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>收入统计</span>
              <el-radio-group v-model="incomeChartType" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 修改图表容器高度 -->
            <div ref="incomeChartRef" class="chart" style="left: 50px; top: 3px; width: 350px; height: 330px; position: relative;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新订单 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>最新订单</span>
          <el-button type="primary" link @click="viewAllOrders">
            <el-icon><More /></el-icon>
            查看全部
          </el-button>
        </div>
      </template>
      <el-table :data="latestOrders" style="width: 100%" v-loading="loading">
        <el-table-column prop="orderNumber" label="订单号" width="200" />
        <el-table-column prop="uname" label="用户名" width="140" />
        <el-table-column prop="dname" label="配送员" width="120" />
        <el-table-column prop="jiage" label="金额" width="120">
          <template #default="{ row }">
            ¥{{ row.jiage }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="130">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="260" />
        <el-table-column label="操作"  width="120">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleViewDetail(row)">
              <el-icon><View /></el-icon>
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
          title="订单详情"
          v-model="detailVisible"
          width="600px"
          :close-on-click-modal="false"
      >
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ currentOrder.orderNumber }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户名">{{ currentOrder.uname }}</el-descriptions-item>
          <el-descriptions-item label="配送员">{{ currentOrder.dname }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">¥{{ currentOrder.jiage }}</el-descriptions-item>
          <el-descriptions-item label="配送地址">{{ currentOrder.zhongdian }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentOrder.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ currentOrder.deliveryTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ currentOrder.notes || '-' }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import  { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import {
  User,
  Van,
  List,
  Money,
  ArrowUp,
  ArrowDown,
  TrendCharts,
  PieChart,
  More,
  View,
  Sunny // 导入天气图标
} from '@element-plus/icons-vue'
import {adminOrder} from "@/assets/admin.js";

const router = useRouter()
const loading = ref(false)

// 图表类型
const orderChartType = ref('week')
const incomeChartType = ref('week')

// 用户统计数据
const userStats = reactive({
  total: 1234,
  growth: 5.2
})

// 配送员统计数据
const deliverymanStats = reactive({
  total: 56,
  growth: -2.1
})

// 订单统计数据
const orderStats = reactive({
  today: 89,
  growth: 12.5
})
//订单详情
const detailVisible = ref(false)

const handleViewDetail = (row) => {
  currentOrder.value = row
  detailVisible.value = true
}

const currentOrder = ref({
  orderNumber:null,
  uname:null,
  dname:null,
  jiage:null,
  createdAt:null,
  deliveryTime:null,
  zhongdian:null,
  notes:null
})

const handelXqing = () =>{
  adminOrder(currentOrder.value).then(res=>{
    console.log(res.data)
  })
}
handelXqing()
// 收入统计数据
const incomeStats = reactive({
  today: 8999.00,
  growth: 8.3
})

// 最新订单数据
const latestOrders = ref([])
const queryOrdera = ref({
  current:1,
  size:3
})
const handelOrder = () =>{
  adminOrder(queryOrdera.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      latestOrders.value = res.data.data.records
    }
  })
}
handelOrder()
// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: '待分配',
    1: '已分配',
    2: '配送站',
    3: '已完成',
    4: '已取消',
    5: '已支付'
  }
  return statusMap[status]
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待分配',
    1: '已分配',
    2: '配送站',
    3: '已完成',
    4: '已取消',
    5: '已支付'
  }
  return statusMap[status]
}

// 查看全部订单
const viewAllOrders = () => {
  router.push('/admin/orders')
}

// 查看订单详情
const viewOrderDetail = (row) => {
  // TODO: 实现查看订单详情功能
  console.log('查看订单详情:', row)
}

// 图表引用
const orderChartRef = ref(null)
const incomeChartRef = ref(null)

// 模拟图表数据
const orderData = {
  week: [120, 200, 150, 80, 70, 110, 130],
  month: [300, 400, 350, 280, 270, 310, 330, 320, 350, 380, 360, 340, 320, 310, 300, 290, 280, 270, 260, 250, 240, 230, 220, 210, 200, 190, 180, 170, 160, 150]
}

const incomeData = {
  week: [1200, 2000, 1500, 800, 700, 1100, 1300],
  month: [3000, 4000, 3500, 2800, 2700, 3100, 3300, 3200, 3500, 3800, 3600, 3400, 3200, 3100, 3000, 2900, 2800, 2700, 2600, 2500, 2400, 2300, 2200, 2100, 2000, 1900, 1800, 1700, 1600, 1500]
}

let orderChart = null
let incomeChart = null

const initOrderChart = () => {
  orderChart = echarts.init(orderChartRef.value)
  const option = {
    xAxis: {
      type: 'category',
      data: orderChartType.value === 'week' ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] : Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: orderData[orderChartType.value],
      type: 'line'
    }]
  }
  orderChart.setOption(option)
}

const initIncomeChart = () => {
  incomeChart = echarts.init(incomeChartRef.value);
  if (incomeChartType.value === 'week') {
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [{
        name: '收入',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1200, name: '周一' },
          { value: 2000, name: '周二' },
          { value: 1500, name: '周三' },
          { value: 800, name: '周四' },
          { value: 700, name: '周五' },
          { value: 1100, name: '周六' },
          { value: 1300, name: '周日' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };
    incomeChart.setOption(option);
  } else {
    const option = {
      xAxis: {
        type: 'category',
        data: Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: incomeData.month,
        type: 'bar'
      }]
    };
    incomeChart.setOption(option);
  }
}

onMounted(() => {
  initOrderChart()
  initIncomeChart()
})

watch([orderChartType, incomeChartType], () => {
  initOrderChart()
  initIncomeChart()
})
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #f9fafb; /* 更柔和的背景色 */
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 增强阴影 */
  min-height: 80vh;
  transition: all 0.3s ease;
}

@media (max-width: 900px) {
  .page-container {
    padding: 16px;
    max-width: 100vw;
    border-radius: 0;
  }
}

.data-cards {
  margin-bottom: 32px; /* 增加底部间距 */
}

.data-card {
  height: 140px; /* 增加卡片高度 */
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04); /* 调整阴影 */
  border: none;
  transition: all 0.3s ease;
  background: #ffffff; /* 卡片背景色 */
}

.data-card:hover {
  transform: translateY(-7px); /* 增加悬停上移距离 */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); /* 增强悬停阴影 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600; /* 调整字体粗细 */
  font-size: 1.2rem; /* 增大字体大小 */
  color: #333333; /* 调整标题颜色 */
  border-bottom: 1px solid #e5e7eb; /* 调整分割线颜色 */
  padding-bottom: 12px;
}

.el-card {
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  background: #ffffff; /* 卡片背景色 */
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 14px;
  overflow: hidden;
  margin-top: 16px;
  background: #ffffff; /* 表格背景色 */
}

:deep(.el-table th) {
  background: #f3f4f6; /* 表头背景色 */
  font-weight: 600;
  color: #2d8cf0;
  font-size: 1.05rem; /* 增大表头字体大小 */
}

:deep(.el-table td) {
  color: #4b5563; /* 表格内容颜色 */
  font-size: 1rem; /* 增大表格内容字体大小 */
}

:deep(.el-tag) {
  border-radius: 10px;
  padding: 0 10px; /* 调整标签内边距 */
}

.chart-container {
  padding: 16px; /* 增加图表容器内边距 */
}

.chart {
  width: 100%;
  height: 100%;
  border-radius: 12px; /* 图表容器圆角 */
}

.new-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 1rem;
  color: #6b7280;
}

.styled-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2d8cf0;
  margin: 8px 0;
}
.data-card:nth-child(1) {
  background-color: #e6f7ff;
}
.data-card:nth-child(2) {
  background-color: #fff6e6;
}
.data-card:nth-child(3) {
  background-color: #f0f9eb;
}
.data-card:nth-child(4) {
  background-color: #fff0f0;
}

.weather-card {
  margin-bottom: 32px;
}

.weather-content {
  display: flex;
  align-items: center;
  padding: 24px;
  gap: 48px; /* 增加图标和详情之间的间距 */
}

.weather-icon {
  font-size: 80px; /* 增大图标尺寸 */
  color: #f9d71c;
  transition: transform 0.3s ease;
}

.weather-icon:hover {
  transform: scale(1.1); /* 添加悬停放大效果 */
}

.weather-details {
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  align-items: center;
  gap: 32px; /* 增加各项之间的间距 */
  flex-wrap: wrap;
}

.main-info {
  margin-bottom: 0; /* 移除原有底部间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.temperature {
  font-size: 48px; /* 增大温度字体大小 */
  font-weight: bold;
  color: #2d8cf0;
}

.condition {
  font-size: 24px; /* 增大天气状况字体大小 */
  color: #6b7280;
}

.additional-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 增加信息项之间的间距 */
}

.info-item {
  font-size: 16px; /* 增大信息项字体大小 */
  color: #6b7280;
  padding: 8px 16px; /* 添加内边距 */
  background-color: #f3f4f6; /* 添加背景颜色 */
  border-radius: 8px; /* 添加圆角 */
  transition: background-color 0.3s ease;
}

.info-item:hover {
  background-color: #e5e7eb; /* 添加悬停背景颜色变化 */
}
</style>